import { useState, useEffect } from 'react'
import { getChannelHttp } from '@/api/homeapi/homeapi.ts';
import HomeList from './components/HomeList/index.js'
import { Tabs } from 'antd-mobile'
import { ChannelItem} from '@/api/homeapi/index'
import './index.css'


function Home() {

  const [channel, setChannel] = useState<ChannelItem[]>([])
  const [channel_id,setchannel_id]=useState('0')


  useEffect(() => {
    handlegetChannelHttp()
  }, [])

  const handlegetChannelHttp = async () => {
    try {
      const res = await getChannelHttp();
      console.log(res)
      setChannel(res.data.channels);
      setchannel_id(res.data.channels[0].id)

    } catch (error) {
      console.error('Error fetching channels:', error);
    }
  }


 


  const handleTabsonChange = (eve: string) => {
    console.log(eve)
    setchannel_id(eve)
    // const listdata = {
    //   channel_id: eve,
    //   timestamp: listRes.pre_timestamp
    // }
    // handGetListHttp(listdata)
  }
  return (
    <div>
      <div className='tabContainer'>
      {channel.length > 1 && <Tabs onChange={handleTabsonChange}>
        {
          channel.map((item) => {
            return (
              <Tabs.Tab title={item.name} key={item.id}>
                <div className='listContainer'>
                <HomeList id={channel_id} />
                </div>
              </Tabs.Tab>)
          })
        }
      </Tabs>}
      </div>
    </div>
  )
}

export default Home
